<template>
  <a-drawer
    :width="width"
    title="配置敏感数据发现策略"
    v-model:visible="visible"
  >
    <SearchFrom
      @onSave="handleSave"
      @onSearch="handleSearch"
      ref="SearchFrom"
    />
    <a-divider orientation="left">结果预览</a-divider>
    <ResultPreview ref="ResultPreview" />
  </a-drawer>
</template>

<script>
import SearchFrom from '@/views/Home/components/SearchFrom';
import { reactive, toRefs, getCurrentInstance } from 'vue';
import ResultPreview from '@/views/Home/components/ResultPreview';
export default {
  components: { SearchFrom, ResultPreview },
  setup() {
    const state = reactive({
      visible: false,
      width: window.innerWidth - 200,
      ResultPreview,
    });
    const { proxy } = getCurrentInstance();
    const open = () => {
      state.visible = true;
    };
    const handleSearch = () => {
      state.ResultPreview.refresh();
    };
    const handleSave = () => {
      state.visible = false;
      proxy.$emit('onChange');
    };
    return {
      ...toRefs(state),
      open,
      handleSearch,
      handleSave,
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.ant-drawer-close) {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 10;
}
</style>